<template>
  <el-dialog
    title="选择标签"
    :visible.sync="$attrs.visable"
    width="640px"
    :before-close="handleClose"
    append-to-body
  >
    <el-form ref="form" :model="form">
      <div class="tagbox p-16">
        <el-form-item label="" class="mb-5">
          <el-radio-group v-model="form.resource1">
            <el-radio
              v-for="(item, index) in radioList"
              :label="item.value"
              :key="index"
              ><span class="c_text"> {{ item.label }} </span></el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" class="mb-0">
          <MultipleSelectSpread
            v-model="form.tags"
            ref="multipleSelectSpread"
            size="small"
            placeholder="选择标签"
            search_placeholder="搜标签组/标签名"
            :receiverNameOpt="lableOpt"
          />
        </el-form-item>
      </div>
      <div class="mt-12 checkbox">
        <el-form-item label="" prop="checked" class="mb-0">
          <el-checkbox v-model="form.checked"><span class="c_text">开启排除条件</span></el-checkbox>
        </el-form-item>
      </div>
      <div class="tagbox p-16 mt-12" v-if="form.checked">
        <el-form-item label="" class="mb-5">
          <el-radio-group v-model="form.resource2">
            <el-radio
              v-for="(item, index) in radioList"
              :label="item.value"
              :key="index"
              ><span class="c_text"> {{ item.label }} </span></el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" class="mb-0">
          <MultipleSelectSpread
            size="small"
            placeholder="选择标签"
            search_placeholder="搜标签组/标签名"
            :receiverNameOpt="lableOpt"
          />
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import MultipleSelectSpread from "@/components/MultipleSelectSpread";
export default {
  data() {
    return {
      form: {
        resource1:1,
        tags:'',
        checked:false,
        resource2:1,
      },
      radioList: [
        { label: "满足任意一个标签", value: 1 },
        { label: "同时满足所有标签", value: 2 },
        { label: "未打标签", value: 3 },
      ],
      lableOpt: [
        {
          value: 1,
          label: "客户等级",
          show: true,
          children: ["一般", "重要", "核心"],
        },
        {
          value: 2,
          label: "客户等级2",
          show: false,
          children: ["一般2", "重要2", "核心2"],
        },
      ],
    };
  },
  components: {
    MultipleSelectSpread,
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleSubmit(){
      console.log('formL', this.form, this.$refs.multipleSelectSpread.selectNameArr)
    }
  },
};
</script>
<style lang="scss" scoped>
.tagbox {
  background-color: #f7f7f7;
  border-radius: 2px;
}
.checkbox {
  padding: 2px 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}
</style>